<template>
    <div :class="className">
        <el-form :label-width="formLabelWidth || 110">
            <el-row>
                <slot name="preSearch"></slot>
                <el-col v-for="(item, index) in columns" :span="item.span || 8" v-show="isShowItem(index)">
                    <el-form-item :label-width="item.labelWidth">
                        <template #label>
                            <el-space :size="4">
                                <span>{{ item.label }}</span>
                                <el-tooltip v-if="item.tooltip" effect="dark" :content="item.tooltip" placement="top">
                                    <i-ep-QuestionFilled />
                                </el-tooltip>
                            </el-space>
                            <span>&nbsp;:</span>
                        </template>
                        <Item :column="item" :searchParam="searchParam" />
                    </el-form-item>
                </el-col>
                <slot name="nextSearch"></slot>
            </el-row>
        </el-form>
        <div class="searchBtn">
            <el-button type="primary" @click="search" :icon="Search">查询</el-button>
            <el-button v-if="showReset" plain @click="reset" :icon="Refresh">重置</el-button>
            <el-button v-if="showCollapse" type="primary" link @click="collapsed = !collapsed">
                {{ collapsed ? "展开" : "合并" }}
                <el-icon class="el-icon--right">
                    <i-ep-ArrowDownBold v-if="collapsed" />
                    <i-ep-ArrowUpBold v-else />
                </el-icon>
            </el-button>
        </div>
    </div>
</template>
<script setup lang="ts" name="PubSearch">
import { ref, computed } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import Item from './components/item.vue'
import { ColumnProps } from './interface/index'

interface PubSearchProps {
    columns: ColumnProps[]; // 搜索配置列
    searchParam?: { [key: string]: any }; // 搜索参数
    search: (params: any) => void; // 搜索方法
    reset: (params: any) => void; // 重置方法
    showReset?: boolean;
    className?: string;
    formLabelWidth?: string | number;
    count?: number; //preSearch和nextSearch所占数量
}

const props = withDefaults(defineProps<PubSearchProps>(), {
    searchParam: () => ({}),
    showReset: true,
    className: 'searchBox',
    count: 0,
});

// 是否默认折叠搜索项
const collapsed = ref(true);

///判断是否显示 展开/合并 按钮
const showCollapse = computed(() => {
    return props.columns.length + props.count > 3 ? true : false;
});

//判断列是否显示
const isShowItem = (index) => {
    if (!collapsed.value) return true;
    if (props.count + index < 3) {
        return true;
    }
    return false;
};


</script>
<style scoped lang="scss"></style>